<template>
  <!-- 料单一览表 -->
  <div class="material-list">
    <el-row :gutter="20">
      <el-col :span="4">
        <tree @treeClick="treeClick" />
      </el-col>
      <el-col :span="20">
        <div style="padding: 20px;">
          <el-tabs v-model="activeName">
            <el-tab-pane label="待下发" name="1">
              <toBeIssued />
            </el-tab-pane>
            <el-tab-pane label="已下发" name="2">
              <issued />
            </el-tab-pane>
            <el-tab-pane label="已作废" name="3">
              <voided />
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import tree from "../components/tree.vue";
import toBeIssued from "./components/to-be-issued.vue";
import issued from "./components/issued.vue";
import voided from "./components/voided.vue";

export default {
  name: "MaterialList",
  components: { tree, toBeIssued, issued, voided },
  props: {},
  data() {
    return {
      activeName: "1",
    };
  },
  filters: {},
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    treeClick(data) {
      console.log(data);
      console.log(this.activeName);
    },
  },
};
</script>

<style scoped lang="scss">
.material-list {
  padding: 20px;
}
</style>
